<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin:0;padding:0;
        list-style: none;
    }
    body>ul{
        margin:100px auto;
        width:600px;
    }
    body>ul>li{
        width:150px;
        float: left;
        border:1px solid ;
        height:50px;
        text-align: center;
        line-height: 50px;
    }
    body>ul>li>ul{
        display: none;
    }
    body>ul>li>ul>li{
        height:30px;
        text-align: center;
        line-height: 30px;
    }
</style>
<body>
<ul>
    <li class='lis'>七月
        <ul>
            <li>name: july</li>
            <li>age:30</li>
            <li>sex:female</li>
        </ul>
    </li>
    <li class='lis'>小夕
        <ul>
            <li>name: xiaoxi</li>
            <li>age:28</li>
            <li>sex:male</li>
        </ul>
    </li>
    <li class='lis'>小七
        <ul>
            <li>name: xiaoqi</li>
            <li>age:26</li>
            <li>sex:female</li>
        </ul>
    </li>
</ul>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function(){
      $('.lis').click(function(){
          $('.lis ul:first-child').css('display','none');
          $('.lis').css('background','');
          $(this).css('background','skyblue').children().stop().show(500);
      }).find('li').hover(function(){
            $(this).css('background','blue');
          }, function(){
            $(this).css('background','');
        }).click(function(){
          alert('ok');
      });
      $('html').click(function(e){
              if(e.target!=$('.lis')[0]&&e.target!=$('.lis')[1]&&e.target!=$('.lis')[2]){
                 $('.lis ul:first-child').css('display','none');
              }
      });
    });
</script>
</body>
</html>